<script setup name="AnnualFeeJfd">
import zlAgencyService from "@/api/finance/zlAgency.js";
import { h } from 'vue'
import Message from 'vue-m-message'
import ossService from '@/api/oss/index.js'
import FileViewer from '@/components/FileViewer/FileViewer.vue'
import { yearFeeJfdTableColumns } from '@/views/system/annualFee/yearFeeConfig.js'
import annualFeeJfdService from '@/api/annualFeeJfd/index.js'
import userServices from '@/api/user/user.js'
import DictTag from '@/components/DictTag/index.vue'
import FileUpload from '@/components/FileUpload/index.vue'
import Toolbar from '@/components/Toolbar/Toolbar.vue'
import { useDict } from '@/utils/dict.js'
import { tableCheckChane } from '@/utils/index.js'

const { proxy } = getCurrentInstance()
const pagerConfig = ref({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})
const ids = ref([])
const tableData = ref([])
const { jfd_status } = useDict('jfd_status')
const isFullscreen = ref(false)
const customerList = ref([])

const tableColumn = reactive([
  {
    type: 'checkbox',
    width: 50,
    align: 'center',
  },
  {
    type: 'seq',
    width: 50,
    align: 'center',
  },
  {
    title: '客户名称',
    field: 'customerName',
    align: 'center',
  },
  {
    title: '待缴费用',
    field: 'djMoney',
    align: 'center',
  },
  {
    title: '状态',
    field: 'status',
    align: 'center',
    slots: {
      default: ({ row }) => {
        return h(DictTag, {
          options: jfd_status.value,
          value: row.status,
        })
      },
    },
  },
  {
    title: '操作',
    field: 'actions',
    align: 'center',
    slots: {
      default: 'actions',
    },
  },
])
const searchConfig = reactive([
  {
    label: '客户名称',
    type: 'select',
    field: 'customerName',
    defaultShow: true,
    options: {
      data: customerList,
      label: 'customerName',
      value: 'customerId',
      key: 'customerId',
    },
  },
])
const queryParam = ref({})
const profileUserData = ref({})

const uploadDialogVisible = ref(false)
const uploadData = ref({})

const viewDialogVisible = ref(false)
const viewData = ref({
  annualFeeVoList: [],
})
const fileData = ref({
  fileSuffix: '',
  fileUrl: '',
})

onMounted(() => {
  getProfileUser()
  getList()
})

function getProfileUser() {
  userServices.profile().then((res) => {
    profileUserData.value = res.data
  })
}
function getList() {
  const params = {
    pageSize: pagerConfig.value.pageSize,
    pageNum: pagerConfig.value.currentPage,
    ...queryParam.value,
  }
  annualFeeJfdService.list(params).then((res) => {
    tableData.value = res.rows
    pagerConfig.value.total = res.total
  })
  zlAgencyService.optionList().then((res) => {
    customerList.value = res.data
  })
}

function handleDelete(row) {
  const delId = row?.feeJfdId || ids.value.join(',')
  annualFeeJfdService.delete(delId).then((res) => {
    const code = res.code
    if (code === 200) {
      Message.success('删除成功')
      getProfileUser()
      getList()
    }
  })
}

function handlePageChange({ currentPage, pageSize }) {
  pagerConfig.value.currentPage = currentPage
  pagerConfig.value.pageSize = pageSize
  getList()
}

function handleCheckChange(data) {
  ids.value = tableCheckChane(data, 'feeJfdId', ids.value)
}

function handleExport() {
  proxy.download('system/annualFeeJfd/export', { ...queryParam.value, exportIds: ids.value.join(',') }, `annualFeeJfd_${new Date().getTime()}.xlsx`)
}

function handleSearch(params) {
  queryParam.value = params
  pagerConfig.value.currentPage = 1
  getList()
}

async function handleView(row) {
  const viewRes = await annualFeeJfdService.detail(row.feeJfdId, { feeNode: 2 })
  viewData.value = viewRes.data
  viewDialogVisible.value = true
  if (viewRes.data.filePath) {
    const fileRes = await ossService.listByIds(viewRes.data.filePath)
    fileData.value = fileRes.data[0]
  }
}

function handleUpload(row) {
  uploadDialogVisible.value = true
  uploadData.value.feeJfdId = row.feeJfdId
}

function handleUploadSubmit() {
  annualFeeJfdService.update(uploadData.value).then((res) => {
    const code = res.code
    if (code === 200) {
      Message.success('上传成功')
      handleDialogCancel()
      getProfileUser()
      getList()
    }
  })
}

function handleDialogCancel() {
  uploadDialogVisible.value = false
  viewDialogVisible.value = false
  uploadData.value = {}
  fileData.value = {}
  viewData.value = {}
  isFullscreen.value = false
}
function handleFullscreen() {
  isFullscreen.value = !isFullscreen.value
}
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="">
      <SearchBar :search-config="searchConfig" @search="handleSearch" />
    </el-card>
    <el-card shadow="never" class="mt-2">
      <Toolbar>
        <el-button
          v-hasPermi="['system:annualFeeJfd:remove']"
          type="danger"
          class="el-gradient-danger"
          :disabled="ids.length === 0"
          @click="handleDelete(null)"
        >
          删除
          <el-icon class="el-icon--right">
            <Delete />
          </el-icon>
        </el-button>
        <el-button
          v-hasPermi="['system:annualFeeJfd:export']"
          type="warning"
          class="el-gradient-warning"
          @click="handleExport()"
        >
          导出
          <el-icon class="el-icon--right">
            <FolderAdd />
          </el-icon>
        </el-button>
      </Toolbar>
      <vxe-grid
        :row-config="{
          keyField: 'feeJfdId',
        }"
        :data="tableData"
        :columns="tableColumn"
        :pager-config="pagerConfig"
        header-cell-class-name="headerCellClass"
        max-height="560px"
        @page-change="handlePageChange"
        @checkbox-all="handleCheckChange"
        @checkbox-change="handleCheckChange"
      >
        <template #actions="{ row }">
          <el-button
            v-hasPermi="['system:annualFeeJfd:query']"
            size="small"
            type="info"
            text
            @click="handleView(row)"
          >
            查看
          </el-button>
          <el-button
            v-if="row.status === '0' && profileUserData.roleGroup === '财务'"
            v-hasPermi="['system:annualFeeJfd:edit']"
            size="small"
            type="primary"
            text
            @click="handleUpload(row)"
          >
            上传
          </el-button>
          <el-button
            v-if="row.status === '0' && profileUserData.roleGroup === '流程人员'"
            v-hasPermi="['system:annualFeeJfd:remove']"
            size="small"
            type="primary"
            text
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </vxe-grid>
    </el-card>
    <el-dialog
      v-model="viewDialogVisible"
      width="80%"
      class="custom-dialog"
      top="2%"
      :fullscreen="isFullscreen"
      @close="handleDialogCancel"
    >
      <template #header>
        <div class="justify-between flex">
          <div class="dialog-header">
            <span class="relative top-3 text-[16px] ">
              查看
            </span>
          </div>
          <div class="flex-center mr-3 relative bottom-[1px] cursor-pointer" title="全屏" @click="handleFullscreen">
            <el-icon size="14">
              <FullScreen />
            </el-icon>
          </div>
        </div>
      </template>
      <vxe-grid
        :columns="yearFeeJfdTableColumns"
        :data="viewData.annualFeeDetailVoList"
        header-cell-class-name="headerCellContractClass"
        max-height="300px"
      />
      <div class="linear-header my-5">
        <span>
          缴费凭证
        </span>
      </div>
      <div
        v-if="fileData?.fileSuffix" class="overflow-y-scroll"
        :class="isFullscreen ? 'h-240' : 'h-115'"
      >
        <FileViewer :file-suffix="fileData.fileSuffix" :file-url="fileData.url" class="wh-full" />
      </div>
      <el-empty v-else class="h-100" description="暂无凭证">
        <template #image>
          <img src="@/assets/images/empty.png">
        </template>
      </el-empty>
    </el-dialog>
    <el-dialog
      v-model="uploadDialogVisible"
      width="30%"
      class="custom-dialog"
      @close="handleDialogCancel"
    >
      <template #header>
        <div class="dialog-header">
          <span class="relative top-3 text-[16px]">
            上传凭证
          </span>
        </div>
      </template>
      <FileUpload v-model="uploadData.filePath" :file-type="[]" :limit="1" />
      <template #footer>
        <div class="px-4 py-2">
          <el-button type="primary" :disabled="!uploadData.filePath" @click="handleUploadSubmit">
            上传
          </el-button>
          <el-button @click="handleDialogCancel">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>

</style>
